<template>
	<view class="message">
		
		<view class="topBox">
			<view @tap="goSystem">
				<image src="../../static/images/news_icon_1.png" mode="scaleToFill"></image>
				<view>
					系统通知
				</view>
			</view>
			<view @tap="goActive">
				<image src="../../static/images/news_icon_2.png" mode="scaleToFill"></image>
				<view>
					活动通知
				</view>
			</view>
			<view @tap="goLogistics">
				<image src="../../static/images/news_icon_3.png" mode="scaleToFill"></image>
				<view>
					物流通知
				</view>
			</view>
		</view>
		<view class="uni-list messageList">
			<view class="uni-list-cell" v-for="(item,index) in chatList" :key="index" @tap="goChat(item)"> 
				<view class="info">
					<image :src="item.imgurl" lazy-load="true" mode="scaleToFill"></image>
					<view>
						<view class="Name">
							{{item.nickName | splicName}}
						</view>
						<view class="messageLast">
							<!-- 什么时候能发货？ -->
						</view>
					</view>
				</view>
				<view class="time">
					{{item.mtime | getTime}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				chatList:[]
			}
		},
		onLoad() {
			this.getChatList()
		},
		methods:{
			goSystem(){
				uni.navigateTo({
					url:'./system'
				})
			},
			goActive(){
				uni.navigateTo({
					url:'./active'
				})
			},
			goLogistics(){
				uni.navigateTo({
					url:'./logis'
				})
			},
			getChatList(){
				let that = this;
				 this.$jim.getConversation().onSuccess(function(data) {
					 if(data.code == 0){
						 for (let i = 0; i < data.conversations.length; i++) {
						 	data.conversations[i].imgurl = ''
						 }
						 
						 that.chatList = data.conversations.reverse()
					 }
					   
				   }).onFail(function(data) {
					   //data.code 返回码
					   //data.message 描述
				   });
			},
			goChat(item){
				console.log(item.username.split("seller"))
				
				uni.navigateTo({
					url:'../chat/chat?storeId=' + item.username.split("seller")[1] + '&name=' + item.nickName
				})
			}
		},
		filters:{
			splicName(val){
				if(val.length < 7){
					return val
				}else{
					return val.substring(0, 7) + '...'
				}
			},
			getTime(val){
				var time = new Date(val)
				let year = time.getFullYear()
				let month = (time.getMonth() + 1)<10?'0' + (time.getMonth() + 1):(time.getMonth() + 1);
				let day = time.getDate()<10?'0' + time.getDate():time.getDate();
				let hours = time.getHours()<10?'0' + time.getHours():time.getHours();
				let min = time.getMinutes()<10?'0' + time.getMinutes():time.getMinutes();
				let sec = time.getSeconds()<10?'0' + time.getSeconds():time.getSeconds();
				
			   var today = new Date()
					today.setHours(0);
					today.setMinutes(0);
					today.setSeconds(0);
					today.setMilliseconds(0);
					var otime = today.getTime()
						//给出时间 - 今天0点
					var offset= val-otime
					// console.log(offset);
					var isToday = offset/1000/60/60
 					if(isToday > 0 && isToday<= 24){
						return hours + ":" + min 
					}else if(isToday < 0 && isToday >= -24){
						return "昨天"
					}else{
						return    month + '月' + day + '日' 
						// + hours + ":" + min + ":" + sec
					}
			},
		},
		watch:{
			chatList(newval,oldval){
				for (let i = 0; i < newval.length; i++) {
					this.$jim.getResource ({
						 'media_id' : newval[i].avatar
					}).onSuccess(data2=>{
						newval[i].imgurl = data2.url
					}).onFail(function(data) {
						   //data.code 返回码
						   //data.message 描述
					});
				}
			},
			deep:true
		}
	}
</script>

<style lang="scss">
	.message{
		min-height: 100vh;
		padding-top: 40upx;
		box-sizing: border-box;
		background-color: #f2f2f2;
		.topBox{
			width: 694upx;
			margin: 0 auto;
			margin-bottom: 30upx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			border-radius: 30upx;
			padding: 46upx 60upx;
			box-sizing: border-box;
			text-align: center;
			font-size: 26upx;
			color: #333;
			image{
				width: 100upx;
				height: 100upx;
				margin-bottom: 10upx;
			}
		}
		.messageList{
			.uni-list-cell{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30upx 28upx;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 1upx;
			}
			.info{
				display: flex;
				justify-content: flex-start;
				image{
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					margin-right: 30upx;
				}
				.title{
					font-size: 36upx;
					color: #333;
				}
				.messageLast{
					font-size: 28upx;
					color: #808080;
				}
			}
			.time{
				font-size: 24upx;
				color: #808080;
			}
		}
	}
</style>
